﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	<style>
body{margin:0;padding:0;font-size:12px;font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;}
li,ul,span,p,h2,h3,dl,dd,dt{margin:0;padding:0;list-style-type:none;}
a,img{border:none;text-decoration:none;}

#abc{margin-top:20px;margin-left:40px;width:680px;height:270px;float:left;}
#a_l{float:left;width:430px;height:270px;overflow:hidden;}
#a_r {float:left;margin-left:5px;}
#a_r ul li {margin-top:5px;width:200px;display:block;cursor:pointer;}
.b{background-color:#dedede;}
</style>
	</head>
<body>

	<div id="abc">
		<div id="a_l">
			<ul>
					<li id="a0"><a  href="#" ><img src="images/main_img_a.jpg" /></a></li>
					<li id="a1"><a  href="#" ><img src="images/main_img.jpg" /></a></li>
					<li id="a2"><a  href="#" ><img src="images/main_img_a.jpg" /></a></li>
					<li id="a3"><a  href="#" ><img src="images/main_img_a.jpg" /></a></li>
					<li id="a4"><a  href="#" ><img src="images/high_img.jpg" /></a></li>
			</ul>
			
		</div>
		<div id="a_r">
			<ul>
				<li id="b0"><a  href="#" ><img src="images/main_img_l.jpg" /></a><span>dafdsfs<strong>safsfasf</strong></span></li>
				<li id="b1"><a  href="#" ><img src="images/main_img_l.jpg" /></a><span>dafdsfs<strong>safsfasf</strong></span></li>
				<li id="b2"><a  href="#" ><img src="images/main_img_l.jpg" /></a><span>dafdsfs<strong>safsfasf</strong></span></li>
				<li id="b3"><a  href="#" ><img src="images/main_img_l.jpg" /></a><span>dafdsfs<strong>safsfasf</strong></span></li>
				<li id="b4"><a  href="#" ><img src="images/main_img_l.jpg" /></a><span>dafdsfs<strong>safsfasf</strong></span></li>
				
			</ul>
		</div>
		<script type="text/javascript">
	
			$(document).ready(function(){
				var n=0;
				var o=0;
				var start;
				$("#a_l>ul>li").eq(0).show();
			
				autoScroll();
				$("#a_r>ul>li").hover(function(){
					stopScroll();
					
					$(this).addClass("b");
					$("#a_r>ul>li").removeClass("b");
					var n = $(this).attr("id");
					var m = n.substring(n.length-1);
					$("#a_l>ul>li").eq(m).fadeIn("slow");
					$("#a_l>ul>li").not($("#a_l>ul>li")[m]).hide();	
					},function(){
					n = $(this).attr("id");
					m = n.substring(n.length-1);
						o = m;
						autoScroll();
					
				});	
				function autoScroll(){
					$("#a_r>ul>li:last").removeClass("b");
					
					$("#a_r>ul>li").eq(o).addClass("b");
					$("#a_r>ul>li").eq(o-1).removeClass("b");
					$("#a_l>ul>li").eq(o).fadeIn("slow");
					$("#a_l>ul>li").eq(o-1).hide();
					o++; o = o>=5?0:o;
					start=setTimeout(autoScroll,1000);
				
				};
				function stopScroll(){
					clearTimeout(start);
				};
			});
			
		</script>
	</div>
</body>